<template>
  <div class='container'>
    原帅
    <el-card>
      <!--  搜索表单 添加按钮-->
      <el-row :gutter="24">
        <el-col :span="22">
          <div>
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="学科名称">
                <el-input v-model.trim="searchKeyFrom.subjectName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="onClear">清除</el-button>
                <el-button type="primary" @click="searchName">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-button icon="el-icon-edit" size="small" type="success" @click="isAddShowDialog=true">添加学科</el-button>
          </div>
        </el-col>
      </el-row>
      <!--  数据提示文案-->
      <el-alert
          :title="title"
          show-icon
          type="info">
      </el-alert>
      <!--  学科表单-->
      <el-table
          :data="subjectsData"
          max-height="1000"
          size="mini"
          style="width: 100%"
      >
        <el-table-column
            label="序号"
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            label="学科名称"
            prop="subjectName"
            width="100">
        </el-table-column>
        <el-table-column
            label="创建者"
            prop="username">
        </el-table-column>
        <el-table-column
            label="创建日期"
            prop="addDate"
            width="180"
        >
          <template v-slot="scope">
            {{ new Date(scope.row.addDate) | parseTime }}
          </template>
        </el-table-column>
        <el-table-column
            label="前台是否显示">
          <template v-slot="scope">
            {{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column
            label="二级目录"
            prop="twoLevelDirectory">
        </el-table-column>
        <el-table-column
            label="标签"
            prop="tags"
            width="100">
        </el-table-column>
        <el-table-column
            label="题目数量"
            prop="totals">
        </el-table-column>
        <el-table-column
            label="操作"
            prop="address">
          <template v-slot="{row}">
            <el-button type="text" @click="redirectDirectory(row)">学科分类</el-button>
            <el-button type="text" @click="redirectTags(row)">学科标签</el-button>
            <el-button type="text" @click="upDateSubjects(row.id)">修改</el-button>
            <el-button type="text" @click="deleteSubjects(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页按钮-->
      <div class="block">
        <el-pagination
            :current-page.sync="subjectForm.page"
            :page-size.sync="subjectForm.pagesize"
            :page-sizes="[5, 10, 20, 50]"
            :total="counts-0"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>
    <!-- 添加学科 编辑学科 弹框   -->
    <subjectsAdd :isShowDialog.sync="isAddShowDialog" @loadSubjectsList="loadSubjectsList"></subjectsAdd>
    <!--    编辑弹框-->
    <subjectsUpdate
        v-if="isShow"
        :form="form"
        :isShow="isShow"
        :isUpdateDialog.sync="isUpdateDialog"
        @loadSubjectsList="loadSubjectsList"
    ></subjectsUpdate>
  </div>
</template>

<script>
import { removeSubjects, subjectsDetail, subjectsList } from '../../api/hmmm/subjects'
import subjectsAdd from '../views/subjects-add'
import subjectsUpdate from '../views/subjects-uptade'

export default {
  name: 'Subjects',
  data () {
    return {
      searchKeyFrom: {}, // 搜索
      subjectsData: [], // 存放学科列表数据数组
      counts: '', // 总记录数
      subjectForm: {
        subjectID: '',
        page: 1, // 当前页码
        pagesize: 10 // 每页条数
      },
      isAddShowDialog: false, // 添加学科弹框
      isUpdateDialog: false, // 编辑学科弹框
      subjectsList: [], // 学科详情
      form: {},
      isShow: true // 控制是否销毁组件
    }
  },
  components: {
    subjectsAdd,
    subjectsUpdate
  },
  created () {
    this.loadSubjectsList()
  },
  computed: {
    title () {
      return !this.counts.length ? '数据一共' + this.counts + '条' : '数据一共0条'
    }
  },
  methods: {
    // 重置搜索框
    onClear () {
      this.searchKeyFrom = {}
      this.subjectForm = {}
      this.loadSubjectsList()
    },
    // 根据名称搜索
    searchName () {
      this.subjectForm = { ...this.searchKeyFrom }
      this.loadSubjectsList()
    },
    // 学科列表数据方法
    async loadSubjectsList () {
      const { data } = await subjectsList(this.subjectForm)
      this.subjectsData = data.items
      this.counts = data.counts
    },
    // pageSize 改变时会触发
    handleSizeChange (val) {
      this.pagesize = val
      this.loadSubjectsList()
    },
    // currentPage 改变时会触发
    handleCurrentChange (val) {
      this.page = val
      this.loadSubjectsList()
    },
    // 子组件触发父组件方法 重新请求数据 渲染页面
    onloadSubjectsList () {
      this.loadSubjectsList()
    },
    // 编辑修改弹框
    async upDateSubjects (id) {
      this.isShow = true
      setTimeout(() => {
        this.isUpdateDialog = true
      }, 500)
      const res = await subjectsDetail(id)
      this.form = res.data
    },
    //  删除学科
    deleteSubjects (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeSubjects(id)
        this.$message.success('删除成功')
        await this.loadSubjectsList()
        if (this.counts === 0) {
          await this.loadSubjectsList()
        } else if (!this.subjectsData.length) {
          this.subjectForm.page--
          await this.loadSubjectsList()
        }
      }).catch(() => {
      })
    },
    // 点击学科分类时跳转
    redirectDirectory (row) {
      this.$router.push({ path: '/subjects/directorys', query: { id: row.id, subjectName: row.subjectName } })
    },
    //  点击学科标签时跳转
    redirectTags (row) {
      console.log(row.id)
      this.$router.push({
        path: '/subjects/tags',
        query: { id: row.id, subjectName: row.subjectName, subjectID: row.subjectID }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.el-input {
  .el-input__inner {
    width: 200px;
  }
}

.show {
  display: none !important;
}

.block {
  display: flex;
  justify-content: flex-end;
}
</style>
